.page1{
  //mixed
  .mid(){
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    animation: 10s rtt linear infinite;
    border-radius: 5000px;
    & > div{
      width: 100px;
      height: 100px;
      animation: 5s zhuan linear infinite;
      position: absolute;
    }
    & img{
      width: 100px;
      height: 100px;
    }
  }
  .logo{
    text-align: center;
    img{
      width: 70px;
    }
  }
  #PG1{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: #D5F3C9;
    overflow: hidden;
    .ddpr{
      position: absolute;
      right: -25%;
      top: 35%;
      img{
        width: 300px;
      }
    }
    .title{
      position: absolute;
      top: 20%;
      left: 5%;
      span{
        width: 15px;
        display: inline-block;
      }
      p{
        color: #711C0D;
        font-weight: bold;
        font-size: 30px;
        line-height: 40px;
      }
    }
    .circles{
      position: absolute;
      width: 600px;
      height: 600px;
      z-index: -1;
      right: -70%;
      top: 0;
      bottom: 0;
      margin: auto;
      .circle1{
        border: 3px dashed #967E62;
        width: 300px;
        height: 300px;
        .mid;
      }
      .circle2{
        border: 2px dashed #967E62;
        width: 400px;
        height: 400px;
        .mid;
        & > div:nth-child(1){
          top: 0;
          bottom: 0;
          left: -50px;
          margin: auto;
        }
        & > div:nth-child(2){
          top: 0;
          bottom: 0;
          right: -50px;
          margin: auto;
        }
        & > div:nth-child(3){
          bottom: -50px;
          left: 0;
          right: 0;
          margin: auto;
        }
      }
      .circle3{
        border: 1px dotted #967E62;
        width: 500px;
        height: 500px;
        .mid;
      }
      .circle4{
        border: 1px solid #967E62;
        width: 600px;
        height: 600px;
        .mid;
        & > div{
          left: 0;
          right: 0;
          top: -50px;
          margin: auto;
        }
      }
    }
    .tips{
      display: block;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  @keyframes rtt {
    0%{transform: rotate(0deg)}
    50%{transform: rotate(180deg)}
    100%{transform: rotate(360deg)}
  }

  @keyframes zhuan {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg)}
  }
}